<template>
  <div class="flex h-screen overflow-hidden">
    <!-- 左侧边栏 -->
    <aside class="w-64 bg-white border-r border-gray-200 flex-shrink-0 overflow-y-auto">
      <div class="h-full flex flex-col">
        <!-- 聊天列表 -->
        <div class="flex-1">
          <div class="p-3">
            <div class="text-gray-500 uppercase tracking-wider">联系人</div>
          </div>

          <div v-for="it in contactStore.getContactList"
               class="flex items-center p-3 hover:bg-gray-50 cursor-pointer transition-colors"
               :class="{ 'bg-gray-100': activeContact === it }"
               @click="clickInto(it)">
            <div class="relative">
              <img :src="it.avatarUrl" alt="头像" class="w-10 h-10 rounded-full object-cover">
              <!-- 在线状态指示器 -->
              <span v-if="it.online"
                    class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></span>
            </div>
            <div class="ml-3 flex-1 min-w-0">
              <div class="flex items-center justify-between">
                <h3 class="text-sm font-medium text-gray-900 truncate">{{ it.nickname }}</h3>
              </div>
            </div>
          </div>

        </div>
      </div>
    </aside>

    <!-- 右侧内容区 -->

    <div class="flex-1 overflow-y-auto bg-gray-50">
      <template v-if="activeContact">
        <ContactDetailPanel :contact="activeContact"></ContactDetailPanel>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import {inject, provide, ref} from 'vue'
import ContactDetailPanel from "@/views/contacts_compoents/ContactDetailPanel.vue";
import {useContactStore} from "@/stores/contacts_store.ts";
import {ContactsItem} from "@/models/chat_model.js";


const contactStore = useContactStore();

//点中的contact
const activeContact = ref(null)

const clickInto = (it: ContactsItem) => {
  console.log(`click contact : name=${it.nickname}`);
  activeContact.value = it;
}

</script>

<style scoped>
/* 自定义滚动条样式 */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(156, 163, 175, 0.5);
  border-radius: 20px;
}
</style>